<script setup>

import { queryAllClazz} from '@/api/clazz';
import { queryStudentApi,addStudentApi} from '@/api/student';
import { ref , watch, onMounted} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';



//性别列表数据
const genders = ref([{ name: '男', value: 1 }, { name: '女', value: 2 }]);

//定义最高学历的数据模型
const degrees = ref([{ name: '初中', value: 1 },{ name: '高中', value: 2 },{ name: '大专', value: 3 },{ name: '本科', value: 4 },{ name: '硕士', value: 5 },{ name: '博士', value: 6 }])
//定义查询表单的数据模型
const searchStudent = ref({
  name: '',
  colleges: [],
  clazzs: [],

})




//定义所属班级的数据模型
const clazzs=ref([])


//定义学生数据模型
const studentList=ref([
]);

//分页数据模型
const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(0);


//查询
const search=async()=>{
  const result=await queryStudentApi(searchStudent.value.name,
    searchStudent.value.colleges,
    searchStudent.value.clazzs,
    currentPage.value,
    pageSize.value,);
    if(result.code){
      studentList.value=result.data.rows;
      total.value=result.data.total;
    }
    }
//查询所有的班级
const queryAllClazzs=async()=>{
  const result=await queryAllClazz()
  if(result.code){
    clazzs.value=result.data
  }
}

  //获取勾选的复用框的值
  const selectIds=ref([]);

  //分页
const handleSizeChange = (val) => {
  search();
}
const handleCurrentChange = (val) => {
  search();
}
const handleSelectionChange=(valArr)=>{
    selectIds.value=valArr.map(item=>item.id);
  }

  //清空
const clear=()=>{
  searchStudent.value={ name: '', colleges: [], clazzs: []};
  search();
}


//保存员工信息
const save = async () => {
 
      let result;
      if(student.value.id){//修改
        result = await updateStudentApi(student.value);
      }else{
        result = await addStudentApi(student.value);
      }
      if (result.code) {
        dialogVisible.value = false;
        ElMessage.success('保存成功');
        search();
      } else {
        ElMessage.error(result.msg);
      }
    } 


//新增/修改表单
const student = ref({
  name: '',
  no: '',
  gender: '',
  phone: '',
  degree: '',
  clazzId: '',
  idCard: '',
  isCollege: '',
  address: '',
  graduationDate: '',
})

//控制弹窗
const dialogVisible=ref(false)
const dialogTitle=ref('')



//新增员工按钮触发的函数
const add=()=>{
    //重置表单效验信息
    if(studentFormRef.value){
      studentFormRef.value.resetFields();
  }

  dialogVisible.value=true;
  dialogTitle.value='新增学员';
  //清空表单数据
  student.value={
    name: '',
    no: '',
    gender: '',
    phone: '',
    degree: '',
    clazzId: '',
    idCard: '',
    isCollege: '',
    address: '',
    gradyationDate: '',
  }
}


//表单校验
const studentFormRef = ref();

//定义钩子函数
onMounted(()=>{
  queryAllClazzs()
  search()
})



</script>

<template>
  <h1>学员管理</h1>
  <el-form :inline="true" :model="searchStudent" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="searchStudent.name" placeholder="请输入学生姓名"  />
    </el-form-item>
    <el-form-item label="最高学历">
      <el-select
        v-model="searchStudent.colleges"
        placeholder="请选择">
        <el-option v-for="college in colleges":label="college.name" :value="college.value"></el-option>

      </el-select>
    </el-form-item>
    <el-form-item label="所属班级" prop="name">
      <el-select
        v-model="searchStudent.clazzs"
        placeholder="请选择">
        <el-option v-for="clazz in clazzs" :label="clazz.name" :value="clazz.id" ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="info" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="add"> + 新增学员</el-button>
  <el-button type="danger" @click="deleteByBatch"> + 批量删除</el-button>


  <!-- //表格展示 -->
  <el-table :data="studentList" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type=selection  width="50" align="center" />
    <el-table-column prop="name" label="姓名" width="100" align="center"/>
    <el-table-column prop="no" label="学号" width="130" align="center"/>
    <el-table-column prop="clazzName" label="班级" width="100" align="center"/>
    <el-table-column prop="gender" label="性别" width="80" align="center">
      <template #default="scope">
        {{scope.row.gender==1?'男':'女'}}
      </template>
    </el-table-column>     
    <el-table-column prop="phone" label="手机号" width="130" align="center"/>
    <el-table-column prop="degree" label="最高学历" width="90" align="center">
      <template #default="scope">
        <span v-if="scope.row.degree==1">初中</span>
        <span v-else-if="scope.row.degree==2">高中</span>
        <span v-else-if="scope.row.degree==3">大专</span>
        <span v-else-if="scope.row.degree==4">本科</span>
        <span v-else-if="scope.row.degree==5">硕士</span>
        <span v-else>研究生</span>
      </template>
    </el-table-column>
    <el-table-column prop="violationCount" label="违纪次数" width="90" align="center"/>
    <el-table-column prop="violationScore" label="违纪扣分" width="90" align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="180" align="center"/>
    <el-table-column  label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="primary" size="small" @click="violation(scope.row.id)">违纪</el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  


   <!-- 新增/修改员工的对话框 -->
 <el-dialog v-model="dialogVisible" :title="dialogTitle">
 
 <el-form :model="student" label-width="80px" :rules="rules" ref="studentFormRef">
   <!-- 基本信息 -->
   <!-- 第一行 -->
   <el-row :gutter="20">
     <el-col :span="12">
       <el-form-item label="姓名" prop="name">
         <el-input v-model="student.username" placeholder="请输入姓名，2-20个字"></el-input>
       </el-form-item>
     </el-col>
     <el-col :span="12">
       <el-form-item label="学号" prop="no">
         <el-input v-model="student.name" placeholder="请输入学号，2-10个字"></el-input>
       </el-form-item>
     </el-col>
   </el-row>

   <!-- 第二行 -->
   <el-row :gutter="20">
     <el-col :span="12">
       <el-form-item label="性别" prop="gender">
         <el-select v-model="student.gender" placeholder="请选择性别" style="width: 100%;">
           <el-option v-for="gender in genders" :label="gender.name" :value="gender.value" ></el-option>
         </el-select>
       </el-form-item>
     </el-col>

     <el-col :span="12">
       <el-form-item label="手机号" prop="phone">
         <el-input v-model="student.phone" placeholder="请输入手机号"></el-input>
       </el-form-item>
     </el-col>
   </el-row>

   <!-- 第三行 -->
   <el-row :gutter="24">
    <el-col :span="12">
      <el-form-item label="身份证号" prop="idCard">
         <el-input v-model="student.idCard" placeholder="请输入身份证号"></el-input>
       </el-form-item>
     </el-col>
     <el-col :span="12">
      <el-form-item label="是否院校" prop="isCollege">
         <el-select v-model="student.isCollege" placeholder="请选择" style="width: 100%;">
          <el-option label="是" value="1" />
          <el-option label="否" value="2" />
         </el-select>
       </el-form-item>
     </el-col>
   </el-row>

   <!-- 第四行 -->
   <el-row :gutter="20">
     <el-col :span="12">
       <el-form-item label="联系地址">
        <el-input v-model="student.address" placeholder="请输入联系地址"></el-input>
       </el-form-item>
     </el-col>
     <el-col :span="12">
      <el-form-item label="最高学历">
         <el-select v-model="student.degree" placeholder="请选择" style="width: 100%;">
          <el-option v-for="degree in degrees" :label="degree.name" :value="degree.value" ></el-option>
         </el-select>
       </el-form-item>
     </el-col>
   </el-row>

   <!-- 第五行 -->
   <el-row :gutter="20">
     <el-col :span="12">
      <el-form-item label="毕业时间">
         <el-date-picker v-model="student.graduationDate" type="date" style="width: 100%;" placeholder="请选择毕业时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
       </el-form-item>
     </el-col>

     <el-col :span="12">
      <el-form-item label="所属班级">
         <el-select v-model="student.clazzId" placeholder="请选择" style="width: 100%;">
          <el-option v-for="clazz in clazzs" :label="clazz.name" :value="clazz.id" ></el-option>
         </el-select>
       </el-form-item>
     </el-col>
   </el-row>
  
 </el-form>
 
 <!-- 底部按钮 -->
 <template #footer>
   <span class="dialog-footer">
     <el-button @click="dialogVisible = false">取消</el-button>
     <el-button type="primary" @click="save">保存</el-button>
   </span>
 </template>
</el-dialog>



  <!-- 分页 -->
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40,50,100]"
       layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<style scoped>

</style>